<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title>首页--求购/求租</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/vant.css">
</head>

<body>
<div class="app" v-cloak>
    <div class="peijianshangcheng  shebeiqiugou">
        <div class="main">
            <div class="filter-tab top-tab">
                <div class="filter-nav" @click="select(0)">
                    <svg class="icon arrow" aria-hidden="true">
                        <use xlink:href="#icon-arrow-down"></use>
                    </svg>
                    品类
                </div>
                <div class="filter-nav" @click="select(1)">
                    <svg class="icon arrow" aria-hidden="true">
                        <use xlink:href="#icon-arrow-down"></use>
                    </svg>
                    类型
                </div>
                <div class="filter-nav" @click="forwardPage('brand_select_win', '../select/',2)">
                    <svg class="icon arrow" aria-hidden="true">
                        <use xlink:href="#icon-arrow-down"></use>
                    </svg>
                    品牌
                </div>
                <div class="filter-nav" @click="forwardPage('area_select_win', '../select/',2)">
                    <svg class="icon arrow" aria-hidden="true">
                        <use xlink:href="#icon-arrow-down"></use>
                    </svg>
                    地区
                </div>
                <div class="filter-nav" @click="select(2)">
                    <svg class="icon arrow" aria-hidden="true">
                        <use xlink:href="#icon-arrow-down"></use>
                    </svg>
                    排序
                </div>
            </div>
            <div style="margin-top: .57rem;" v-if="listDatas&&listDatas.length>0">
                <div class="item-list" @click="gotoDetail(item)" v-for="(item,index) in listDatas" :key="index">
                    <div class="help-item">
                        <div class="item-title">
                            {{item.title}}
                        </div>
                        <div class="item-attr">
                            <div class="item-date">{{item.publishTime | handleTimePlus('//::')}}</div>
                            <div class="item-distance">距离：{{item.countDistance}}</div>
                        </div>
                    </div>
                </div>
                <div class="no-more" v-if="!hasNext">没有更多了</div>
            </div>
            <div v-else class="collect-empty">
                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
                <div>暂无内容～</div>
            </div>
            <div class="release" @click="goEdit('release_edit_win', '../release/','edit')">
                <div class="release-icon"></div>
                <div class="release-text">发布</div>
            </div>
            <van-popup v-model="show" position="right" :style="{ height: '100%',width:'77%' }">
                <div class="screen-condition">
                    <div class="condition-title">{{conditionName}}</div>
                    <div class="screen-condition-list flex-x-s flex-wrap">
                        <div class="screen-condition-item" v-for="(item,index) in conditionList"
                             :class="{active:index == conditionCurIndex}" @click="selectCondition(index,item)">
                            {{item.name}}
                        </div>
                    </div>
                </div>
                <div class="screen-confirm" @click="confirm">确定</div>
            </van-popup>
        </div>
    </div>
</div>
<script src="../../script/api.js "></script>
<script src="../../script/flexible.js "></script>
<script src="../../script/fastclick.js "></script>
<script src="../../script/vue.min.js "></script>
<script src="../../script/iconfont.js "></script>
<script src="../../script/vant.min.js"></script>
<script src="../../script/restful.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/businessCommon.js"></script>
<script>
    apiready = function () {

            api.addEventListener({
                name: 'toggleTab'
            }, function(ret, err) {
                api.pageParam.title = ret.value.title
                console.log(api.pageParam.title)
            });
            var vm = new Vue({
                el: '.app',
                data() {
                    return {
                        show: false,
                        wxIndex: 0,
                        conditionCurIndex: 0,
                        conditionCurItem: {id: -1, name: '全部'},
                        conditionList: [],
                        conditionName: '店铺类型',
                        conditionIndexObj: {categoryIndex: 0, typeIndex: 0, orderIndex: 0},
                        conditionCopy: '全部', //选中的条件
                        wxList: [],
                        listCategories: [],
                        selectedCategories: null,
                        listTypes: [],
                        listDatas: [],
                        queryParam: {
                            // 	类型：0求购 1求租
                            types: [],
                            areaId: null,
                            brandIds: [],
                            categoryIds: [],
                            ids: [],
                            keyword: null,
                            location: null,
                            modelIds: [],
                            orderBy: null,
                            pageNum: 1,
                            pageSize: 10,
                            queryOwn: false,
                            status: 1,
                            typeIds: []
                        },
                        // 类型 0整机买卖 1租赁出租 2配件
                        categoriesType: 0,
                        hasNext:true,
                        authStatus:{
                            merchant:-1,
                            personal:-1
                        }
                    }
                },
                filters:{
                    handleTimePlus:handleTimePlus
                },
                mounted: function() {
                    var location = api.getPrefs({
                            sync: true,
                            key: 'location_home'
                        })||{}
                    // var location = $api.getStorage('location_home') || {}
                    this.queryParam.location = JSON.parse(location).location;
                    let vm = this
                    if (api.pageParam.title === "SELL_DEVICE") {
                        vm.categoriesType = 0
                    } else if (api.pageParam.title === "LEASE_DEVICE") {
                        vm.categoriesType = 1
                    }
                    // var location = $api.getStorage('location_home') || {};
                    this.queryParam.location = JSON.parse(location).location
                    vm.queryParam.types = [vm.categoriesType]
                    vm.initCategories()
                    vm.getAuthorizationStatus()
                },
                methods: {
                    getAuthorizationStatus() {
                        let vm = this
                        mime("getAuthorizationStatus")(function(ret) {
                            vm.authStatus.merchant = ret.data.merchant
                            vm.authStatus.personal = ret.data.personal
                        })
                    },
                    initCategories: function() {
                        let vm = this
                        release("getCategories")(0, null, vm.categoriesType, function(ret, err) {
                            if (ret.data.list && ret.data.list.length > 0) {
                                ret.data.list.unshift({
                                    id: -1,
                                    name: '全部'
                                })
                                ret.data.list.forEach(list => {
                                    vm.listCategories.push({
                                        id: list.id,
                                        name: list.name
                                    })
                                })
                                vm.getListData()
                                vm.initTypeSelect('')
                            } else {
                                vm.listCategories.push({
                                    id: null,
                                    name: "暂无数据"
                                })
                            }
                            console.log("@:" + JSON.stringify(vm.listCategories))
                        });
                    },
                    initTypeSelect: function(parentId) {
                        vm.listTypes = []
                        release("getCategories")(1, parentId, vm.categoriesType, function(ret, err) {
                            if (ret.data.list && ret.data.list.length > 0) {
                                ret.data.list.unshift({
                                    id: -1,
                                    name: '全部'
                                })
                                ret.data.list.forEach(list => {
                                    vm.listTypes.push({
                                        id: list.id,
                                        name: list.name
                                    })
                                })
                            } else {
                                vm.listTypes.push({
                                    id: null,
                                    name: "暂无数据"
                                })
                            }
                        });
                    },
                    getListData: function() {
                        let vm = this
                        var location = vm.queryParam.location.split(',')
                        index.equipment("getListEquipments")(vm.queryParam, function(ret) {
                            ret.data.list.map(item => {
                                var countDistance = getDistance(location[1], location[0], item.location.lat, item.location.lon)
                                countDistance = (Number(countDistance) / 1000).toFixed(1)
                                item.countDistance = countDistance > 500 ? '500km 以上' : countDistance + 'km'
                            })
                            if(vm.queryParam.pageNum == 1){
                                vm.listDatas = ret.data.list
                            }else{
                                vm.listDatas = vm.listDatas.concat(ret.data.list)
                            }
                            vm.hasNext = ret.data.hasNext
                            console.log('listDatas：',JSON.stringify(vm.listDatas))
                        })
                    },
                    goEdit(url, relative, status){
                        if (!checkToken()) return false;
                        if(vm.authStatus.merchant == 1 || vm.authStatus.personal == 1){
                            let editName = ''
                            if (api.pageParam.title === "BUY_DEVICE") {
                                editName = '求购设备'
                            } else if (api.pageParam.title === "RENT_DEVICE") {
                                editName = '求租设备'
                            } else if (api.pageParam.title === "PARTS") {
                                editName = '配件'
                            }
                            api.openWin({
                                name: url,
                                url: (relative || '') + url + ".html",
                                bounces: false,
                                pageParam: {
                                    editName: editName,
                                    status: status
                                }
                            })
                        }else{
                            toastMiddle('认证通过后才可进行发布')
                        }

                    },
                    forwardPage(url, relative, status) {
                        if(url == 'release_edit_win'){
                            if (!checkToken()) return false;
                        }
                        let editName = ''
                        if (api.pageParam.title === "BUY_DEVICE") {
                            editName = '求购设备'
                        } else if (api.pageParam.title === "RENT_DEVICE") {
                            editName = '求租设备'
                        } else if (api.pageParam.title === "PARTS") {
                            editName = '配件'
                        }
                        api.openWin({
                            name: url,
                            url: (relative || '') + url + ".html",
                            bounces: false,
                            pageParam: {
                                editName: editName,
                                status: status
                            }
                        })
                    },
                    gotoDetail(item) {
                        api.openWin({
                            name: "ask_rent_win",
                            url: "ask_rent_win.html",
                            bounces: false,
                            pageParam: {
                                detailItem: item,
                                title: api.pageParam.title
                            }
                        })
                    },
                    select(index) {
                        let vm = this
                        if (index == 0) {
                            vm.conditionCurIndex = this.conditionIndexObj.categoryIndex
                            vm.conditionName = '品类'
                            vm.conditionList = vm.listCategories
                        } else if (index == 1) {
                            vm.conditionCurIndex = this.conditionIndexObj.typeIndex
                            vm.conditionName = '类型'
                            vm.conditionList = vm.listTypes
                        } else if (index == 2) {
                            vm.conditionCurIndex = vm.conditionIndexObj.orderIndex
                            vm.conditionName = '排序'
                            vm.conditionList = [{
                                id: 'DISTANCE_ASC',
                                name: '距离由近及远'
                            }, {
                                id: 'UPDATE_TIME_DESC',
                                name: '更新时间最新'
                            }, ]
                        }
                        this.wxIndex = index
                        this.show = true
                    },
                    selectCondition(index, item) {
                        this.conditionCurIndex = index
                        this.conditionCurItem = item
                    },
                    confirm() {
                        var item = this.conditionCurItem
                        console.log(JSON.stringify(item))
                        if (this.wxIndex == 0) {
                            this.conditionIndexObj.categoryIndex = this.conditionCurIndex
                            this.queryParam.categoryIds = []
                            if (item.id > 0) {
                                this.queryParam.categoryIds = [item.id]
                                this.initTypeSelect(item.id)
                            } else {
                                this.initTypeSelect('')
                            }
                            this.conditionIndexObj.typeIndex = 0
                        } else if (this.wxIndex == 1) {
                            this.conditionIndexObj.typeIndex = this.conditionCurIndex
                            this.queryParam.typeIds = []
                            if (item.id > 0) this.queryParam.typeIds = [item.id]
                        } else if (this.wxIndex == 2) {
                            this.conditionIndexObj.orderIndex = this.conditionCurIndex
                            this.queryParam.orderBy = item.id
                        }
                        this.listDatas = []
                        this.queryParam.pageNum = 1
                        this.getListData()
                        this.show = false
                    },
                },

            })
            api.addEventListener({
                name: 'selectBrand'
            }, function(ret, err) {
                if (ret.value.status == 1) return
                var brand = ret.value.brand
                vm.queryParam.brandIds = []
                if (brand.id > 0) vm.queryParam.brandIds = [brand.id]
                vm.queryParam.pageNum = 1
                vm.listDatas = []
                vm.getListData()
            });
            api.addEventListener({
                name: 'filterDistrict'
            }, function(ret, err) {
                if (ret.value.status == 1) return
                vm.queryParam.areaIds = []
                if (ret.value.city.id > 0) vm.queryParam.areaIds = [ret.value.city.id]
                vm.queryParam.pageNum = 1
                vm.listDatas = []
                vm.getListData()
            });
            api.setRefreshHeaderInfo({
                bgColor: '#f7f7f7',
                textDown: '下拉更新有惊喜',
                textUp: '松开可以刷新'
            }, function(ret, err){
                vm.queryParam.pageNum = 1
                vm.listDatas = []
                vm.getListData()
                api.refreshHeaderLoadDone()
            });
            // 上拉加载
            api.addEventListener({
                name: 'scrolltobottom',
                extra: {
                    threshold: -10
                }
            }, function(ret, err) {
                console.log('加载');
                if (vm.hasNext) {
                    vm.queryParam.pageNum++
                    vm.getListData()
                }
            });
            api.addEventListener({
                name: 'login'
            }, function(ret, err) {
                vm.getAuthorizationStatus()
            })
        }
    </script>
</body>

</html>
